<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>世优小脑演示</title>
    <script type="module" src="model-viewer.min.js"></script>
    <script src="./js/three.js"></script>
    <script src="./js/gltfloader.js"></script>
    <style>

        html {
            height: 100%;
            width: 100%;
        }

        body{
            background-size: cover;
            min-height: 100%;
            width: 100%;
            background-image:url("./res/big_bg.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }


        .frame {
            width: 1080px;
            height: 800px;
            margin: auto;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
            padding: 20px;
            font-size: 14px;
            border: none;
        }

        .warning {
            background-color: #df68a2;
            padding: 3px;
            border-radius: 5px;
            color: white;
        }


    </style>
</head>

<body>

    <img style="position:absolute;top:10px;left:0;width:250px;" src="./res/logo.png">


    <div id="create_area" style="margin-top:100px;width: 100%;">
        <h1 style="color:white;">创建你的虚拟角色</h1>
        <input type="button" value="使用默认模型" onClick="displayDefault()">
        <input type="button" value="创建一个新模型" onClick="displayIframe()"/>
        <p id="avatarUrl">Avatar URL:</p>
    </div>

    <div id="show_area" style="margin-top:100px;width: 100%;">
        <h1 style="color:white;">我们来聊聊吧</h1>
        <model-viewer id="modelviewer" alt="Ready Player Me Avatar"
                      src="https://models.readyplayer.me/6429a53f9c53fede9f01ae9a.glb" shadow-intensity="1" camera-controls
                      touch-action="pan-y">
        </model-viewer>
    </div>

    <iframe id="frame" class="frame" allow="camera *; microphone *; clipboard-write"
            hidden></iframe>

<script>
        var createdAvatarUrl = "";
        const subdomain = "4ubrain"; // Replace with your custom subdomain
        const frame = document.getElementById('frame');

        frame.src = 'https://4ubrain.readyplayer.me/avatar?frameApi';

        window.addEventListener('message', subscribe);
        document.addEventListener('message', subscribe);

        function subscribe(event) {
            const json = parse(event);

            if (json?.source !== 'readyplayerme') {
                return;
            }

            // Susbribe to all events sent from Ready Player Me once frame is ready
            if (json.eventName === 'v1.frame.ready') {
                frame.contentWindow.postMessage(
                    JSON.stringify({
                        target: 'readyplayerme',
                        type: 'subscribe',
                        eventName: 'v1.**'
                    }),
                    '*'
                );
            }

            // Get avatar GLB URL
            if (json.eventName === 'v1.avatar.exported') {
                console.log(`Avatar URL: ${json.data.url}`);
                document.getElementById('avatarUrl').innerHTML = `头像生成地址: ${json.data.url}`;
                createdAvatarUrl = json.data.url;
                document.getElementById('frame').hidden = true;
            }

            // Get user id
            if (json.eventName === 'v1.user.set') {
                console.log(`User with id ${json.data.id} set: ${JSON.stringify(json)}`);
            }
        }

        function parse(event) {
            try {
                return JSON.parse(event.data);
            } catch (error) {
                return null;
            }
        }

        //创建头像&模型,显示Readyplayerme的iframe
        function displayIframe() {
            document.getElementById('frame').hidden = false;
        }

        //使用默认模型
        function displayDefault() {
            console.info('使用默认模型');

            //隐藏create布局,隐藏iframe
            document.getElementById('create_area').hidden = true;
            document.getElementById('frame').hidden = true;
            //显示模型布局
            document.getElementById('show_area').hidden = false;
        }



</script>

</body>

</html>